page-home {
  .ontent {
    width: 100%;
    height: 10rem;
    .lanren {
      margin: 100px auto;
      padding: 0;
      li {
        list-style: none;
        .scale_panel {
          color: #999;
          // position: absolute;
          line-height: 18px;
          // left: 60px;
          // top: -0px;
        }
        //     .scale_panel>span:first-child {
        //         position: absolute;
        //         left: -5rem;
        //         font-size: 2rem;
        //     }
        //      .scale_panel>span:nth-child(2) {
        //     position: absolute;
        //     right: -5rem;
        //     font-size: 2rem;
        // }
        .scale {
          background-repeat: repeat-x;
          background-position: 0 100%;
          background-image: linear-gradient(
            to right,
            #08d7f2 0%,
            #2bf06a 50%,
            #2bf06a 50%,
            #fc6076 100%
          );
          border-left: 1px #83bbd9 solid;
          width: 80%;
          height: 0.5rem;
          position: relative;
          border-radius: 2rem;
          margin: auto;
        }
        .scale > span {
          background-color: green;
          width: 1.5rem;
          height: 1.5rem;
          position: absolute;
          left: -18px;
          top: 50%;
          cursor: pointer;
          border-radius: 50%;
          font-size: 2rem;
          transform: translate(0, -50%);
          -webkit-transform: translate(0, -50%);
        }
        .scale > div {
          background-repeat: repeat-x;
          background-color: red;
          /*进度条颜色*/
          width: 0px;
          position: absolute;
          height: 1rem;
          width: 0;
          left: 0;
          bottom: 0;
          border-radius: 2rem;
        }
        #title {
          position: absolute;
          top: 6rem;
          left: 23rem;
        }
      }
    }
    /*横条样式*/
    input[type="range"] {
      -webkit-appearance: none; /*清除系统默认样式*/
      width: 100%;
      background: -webkit-linear-gradient(#61bd12, #61bd12) no-repeat, #ddd; /*设置左边颜色为#61bd12，右边颜色为#ddd*/
      background-size: 100% 100%; /*设置左右宽度比例*/
      height: 3px; /*横条的高度*/
    }
    /*拖动块的样式*/
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none; /*清除系统默认样式*/
      height: 20px; /*拖动块高度*/
      width: 20px; /*拖动块宽度*/
      background: #fff; /*拖动块背景*/
      border-radius: 50%; /*外观设置为圆形*/
      border: solid 1px #ddd; /*设置边框*/
    }
  }
}
